<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <meta name="theme-color" content="#0b1220" />
    <title>数字炸弹</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700&family=Inter:wght@400;600;700&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <main class="app" aria-live="polite">
      <header class="app__header">
        <h1 class="app__title" aria-label="数字炸弹">数字炸弹</h1>
        <p class="app__subtitle">在 1 到 100 中找出隐藏的数字</p>
      </header>

      <section class="controls">
        <button id="startButton" class="button button--primary" type="button" aria-pressed="false">开始</button>
      </section>

      <section class="board__wrapper">
        <div id="board" class="board" role="grid" aria-label="数字网格 1 到 100"></div>
      </section>

      <div id="overlay" class="overlay" aria-hidden="true">
        <div class="overlay__content">
          <div class="overlay__text">游戏结束</div>
          <div class="overlay__hint">点击「重新开始」再来一局</div>
        </div>
      </div>
    </main>

    <script defer src="./script.js"></script>
  </body>
  </html>


